<template>
	<view class="qj-list">
		<z-paging ref="paging" v-model="dg.list" @query="getDgList" :default-page-size="4"
			:empty-view-style="{'top': '80rpx'}" :empty-view-z-index="15"
			:paging-style="{'background-color':'#ffffff'}">
			<ListTools slot="top" :total="dg.total" :sedate="{st: dg.ps.stime, et: dg.ps.etime}" @selDate="selSeDate">
				<!-- <template>
					<view class="other-btns">
						<label 
							class="lt-obtn lt-obtn-sel"
							@click="gotoQjAdup"
						>添加</label>
					</view>
				</template> -->

				<template #right-slot>
					<view class="lt-r-btn" @click="gotoQjAdup">
						<u-icon name="plus"></u-icon>添加
					</view>
				</template>
			</ListTools>

			<view>
				<view class="my-list2">
					<view class="ml-item" v-for="(o, index) in dg.list" :key="index">
						<view class="i-title" :data-obj="o.id" @click="gotoQjDetail">
							<view>
								<view class="tip-icon"></view>{{o.leaveType}}
							</view>
							<!-- <view>详情<u-icon name="arrow-right"></u-icon></view> -->
						</view>

						<view class="i-row">{{U.sedate(o.leaveStartTime, o.leaveEndTime)}}</view>
						<view class="i-row">{{o.leaveReason}}</view>
						<view class="i-footer">
							<view>申请时间：{{o.addTime}}</view>
							<view>{{o.leaveState.text}}</view>
						</view>

						<view class="i-btns">
							
							<view  v-if="o.leaveState.id == 0" class="btn" :data-obj="{index: index, id: o.id}"
								@click="setDelQjMd">删除记录</view>

							<view v-if="o.leaveState.id == 0 || o.leaveState.id == 2"  class="btn ok" :data-obj="o.id"
								@click="gotoQjAdup">修改请假</view>
						</view>
					</view>
				</view>

				<u-modal :title="delMd.title" :confirm-style="{'color': '#00c3ce'}" v-model="delMd.state"
					:show-cancel-button="true" @confirm="okDelQj">
					<view class="c-yellow" :style="{'padding': '20rpx', 'text-align': 'center'}">{{delMd.tip}}</view>
				</u-modal>

				<u-toast ref="qtoast" />
			</view>
		</z-paging>
	</view>
</template>

<script>
	import ListTools from '@/components/list-tools/list-tools.vue';

	export default {
		components: {
			ListTools
		},
		data() {
			return {
				// 列表参数对象
				dg: {
					// 请求参数对象
					ps: {
						// 开始时间
						stime: this.U.getMonthFirstDay(new Date(), 1),
						// 结束时间
						etime: this.U.getMonthLastDay(new Date(), 1),
						page:{
							pageNum:1,
							pageSize:4,
						}
					},
					// 列表数组
					list: [],
					// 数据总数
					total: 0,
				},

				// 删除-请假-弹框
				delMd: {
					state: false,
					title: '删除提示',
					tip: '', // 提示内容
					obj: null, // 参数对象
				}
			}
		},
		onLoad() {
			const that = this;

			// 其他页面跳转回当前页刷新列表
			uni.$on('refQjList', (i) => {
				that.$nextTick(function() {
					if (that.dg.list.length == 0) {
						// 重新加载
						that.$refs.paging.reload();
					} else {
						// 刷新列表
						that.$refs.paging.refresh();
					}
				});
			});
		},
		onUnload() {
			// 移除监听
			uni.$off('refQjList', this.refQjList);
		},
		methods: {
			// 日期选择事件回调
			selSeDate(e) {
				console.log('起止日期选择事件', e);

				this.dg.ps.stime = e.st;
				this.dg.ps.etime = e.et;

				// 刷新列表
				this.$refs.paging.reload();
			},
			/**
			 * 获取-未完团-数据列表
			 */
			getDgList(pageNo, pageSize) {
				let that = this,
					dg = that.dg,
					ps = dg.ps;
				ps.page.pageNum = pageNo;
				ps.page.pageSize = pageSize;
				// ps.page = pageNo;
				// ps.rows = pageSize;
				that.$u.api.getQjList(ps).then(res => {
					if (res.code == 1) {
						that.$refs.paging.complete(res.data.list);

						dg.total = res.data.total;
					}
				});
			},
			// 导航-请假详情
			gotoQjDetail(e) {
				let id = e.currentTarget.dataset.obj;

				uni.navigateTo({
					url: '/my-man/qj-list/qj-detail/qj-detail?id=' + id
				})
			},
			// 导航-请假-添加/修改
			gotoQjAdup(e) {
				let id = e.currentTarget.dataset.obj;
				let url = '/my-man/qj-list/qj-adup/qj-adup';
				if (id) url += '?id=' + id;

				uni.navigateTo({
					url: url
				});
			},
			// // 显示-添加/修改-请假-弹框
			// showQjAdup(e){
			// 	console.log('修改数据', e);
			// 	const that = this, U = that.U, md = that.adupQjMd, obj = e.currentTarget.dataset.obj;

			// 	// 显示弹框
			// 	md.show = true;
			// 	// 设置-修改类型
			// 	md.obj = U.scopy(obj);

			// 	console.log('修改弹框对象', that.adupQjMd);
			// },
			// 删除-请假记录
			setDelQjMd(e) {
				let that = this,
					U = that.U;

				that.delMd = {
					state: true,
					title: '删除提示',
					tip: '确定删除当前请假记录吗？',
					obj: e.currentTarget.dataset.obj
				};
			},
			// 确认删除-请假记录
			okDelQj() {
				let that = this,
					U = that.U,
					obj = that.delMd.obj;

				that.$u.api.delQj({
					id: obj.id
				}).then(res => {
					if (res.code == 1) {
						U.qsuccess('删除成功', 1000);

						// 刷新记录
						that.$refs.paging.refresh();

						// 隐藏弹框
						that.delMd.state = false;
					} else {
						U.qerror(res.msg);
					}
				});
			},


		}
	}
</script>

<style lang="less">
	.qj-list {
		min-height: 100vh;
		padding-top: 2rpx;
	}
</style>